<template>
    <div class="verify-code">
        <div class="verify">
            <div class="top-img">
               <div ref="verifyBlock" class="imgBox" style="z-index: 5"></div>
               <div ref="verifyBg">
                 <div v-if="isFrame" class="timeShow">
                   <div class="second">
                     <svg-icon
                         v-if="isSuccess"
                         :name="'icon-Frame'"
                         class-name="Frame-svg-icon"
                     ></svg-icon>
                     <svg-icon
                         v-if="!isSuccess"
                         :name="'icon-rowDel'"
                         class-name="Frame-svg-icon"
                     ></svg-icon>
                     <div v-if="isSuccess" class="success">只用了{{ num }}s，这速度简直完美</div>
                     <div v-if="!isSuccess" class="fail">验证失败，请重试</div>
                   </div>
                 </div>
               </div>
            </div>
            <div class="bottom-block">
                <div class="block" @mousedown="blockMousedown" ref="blockDiv">
                    <div v-for="item in 3" :key="item"></div>
                </div>
                <div class="track" ref="track">
                  <span v-if="!isFrame">请拖动滑块，滑动到右边完成拼图</span>
                </div>
            </div>
            <div class="btn">
                <img src="~@/assets/file/svg/refresh.svg" alt="" srcset="" @click="verifyOperation('refresh')">
                <img src="~@/assets/file/svg/close_verify.svg" alt="" srcset="" @click="verifyOperation('close')">
            </div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, reactive, ref} from 'vue'
import {verifyCode} from '@/api/login.js'

const blockDiv = ref(null)
const verifyBlock = ref(null)
const verifyBg = ref(null)
const track = ref(null)
const positionX = ref(0)
let isMove = ref(false)
const verifyDate = reactive({
    code: null,
    uuid: null
})
const emit = defineEmits(['verifyOperation'])

onBeforeMount(() => {
    refreshCode()
})
const time_num = ref(0)
const timer = ref(null)
const num = ref(0)
const isFrame = ref(false) // 是否显示遮罩层
const isSuccess = ref(false)
const blockMousedown = (e) => {
  // 开始计时
  timer.value = setInterval(_ => {
    time_num.value += 1
  }, 50)

  isMove.value = true
  blockDiv.value.style.cursor = 'pointer'
  const X = e.clientX
  const maxWidth = track.value.offsetWidth - blockDiv.value.offsetWidth

  // 鼠标移动
  document.onmousemove = (event) => {
    event = event || window.event
    let left = event.clientX - X
    if (left < 0) {
      left = 0
    } else if (left > maxWidth) {
      left = maxWidth
    }
    blockDiv.value.style.left = left + 'px'
    verifyBlock.value.style.left = left + 'px'
  }

  // 鼠标抬起
  document.onmouseup = (event) => {
    // 结束计时
    clearInterval(timer.value)
    num.value = time_filter(time_num.value)
    isMove.value = false
    blockDiv.value.style.cursor = 'default'

    // 元素距离左侧的距离
    let X = verifyBlock.value.style.left.replaceAll("px","") - 10
    verifyDate.code = X > 0 ? X : 0

    // 与接口返回元素距离做比较 误差 5
    if(Math.abs(positionX.value - X) <= 5) {
      console.log('校验通过')
      isFrame.value = true
      isSuccess.value = true

      setTimeout(() => {
        emit('verifyOperation', 'refresh', verifyDate)
      }, 1000)

    } else {
      console.log('校验失败')
      isFrame.value = true
      isSuccess.value = false
      refreshCode()
      setTimeout(() => {
        isFrame.value = false
      }, 1000)
    }
    // 取消document的onmousemove和onmouseup事件 ！！！
    document.onmousemove = null
    document.onmouseup = null
  }
}

const verifyOperation = (type) => {
    if(type == 'refresh') {
        refreshCode()
        return
    }
    emit('verifyOperation', type)
}

const refreshCode = async () => {
    const res = await verifyCode()
    verifyBlock.value.style.background = 'no-repeat url(' + res.data.blockSrc + ') center'
    verifyBlock.value.style.top = res.data.blockY + 3 + 'px'
    verifyBlock.value.style.left =  '10px'
    verifyBg.value.style.background = 'no-repeat url(' + res.data.img + ') center'
    blockDiv.value.style.left = '0px'
    verifyDate.uuid = res.data.uuid
    positionX.value  = res.data['blockX']
}
const time_filter = (num) =>  {
  let time_num = num * 50
  let second =  Math.floor(time_num / 1000 % 60);
  let m_second = (time_num % 1000).toString().slice(0, 1)
  return second + "." + m_second
}
</script>

<style lang="scss" scoped>
.verify-code {
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(32, 32, 32, 0.2);

    display: flex;
    justify-content: center;
    align-items: center;

    .verify{
        width: 388px;
        height: 324px;
        padding: 0 24px;
        background-color: #fff;
        border-radius:6px;

        .top-img{
          //background-color: red;
            margin-top: 24px;
            div:nth-child(2){
                width: 340px;
                height: 196px;
              position: relative;
              .timeShow {
                z-index: 10 ;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0.85;
                border-radius: 6px;
                background: rgba(255, 255, 255, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                .Frame-svg-icon {
                  height: 62px;
                  width: 62px;
                }
                .second {
                  width: 100%;
                  //height: 22px;
                  font-size: 18px;
                  font-weight: 400;
                  .success {
                    height: 22px;
                    margin-top: 12px;
                    color: rgba(50, 175, 0, 1);
                  }
                  .fail {
                    height: 22px;
                    margin-top: 12px;
                    color: rgba(227, 77, 89, 1);
                  }
                }
              }
            }
            div:nth-child(1){
                width: 65px;
                height: 90px;
                // background-color: blue;
                float: left;

                position: relative;
                top:0px;
                left:0px;
            }
        }

        .bottom-block{
            width: 340px;
            height: 36px;
            margin-top:14px;

            // &:hover{
            //     cursor: pointer;
            // }

            .track{
                width: 100%;
                height: 20px;
                background-color: rgba(228, 228, 228, 1);
                border-radius:100px;
                font-size: 12px;
                font-weight: 400;
                padding-right:25%;
                text-align: right;
                line-height: 20px;
                position: relative;
                top:8px;
            }

            .block{
                width: 65px;
                height: 100%;
                background-color: rgba(30, 117, 254, 1);
                border-radius: 47px;

                float: left;
                position: relative;
                left:0px;
                z-index: 2;

                display: flex;
                justify-content: center;
                align-items: center;

                div{
                    width: 2px;
                    height: 14px;
                    background-color: #fff;
                    margin-right:6px;
                }
            }
        }

        .btn{
            margin-top: 23px;
            text-align: right;
            img{
                &:hover{
                    cursor: pointer;
                }
            }
            img:nth-child(1){
                margin-right: 10px;
            }
        }
    }
}
</style>
